<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>小图标与文字垂直居中对齐-相对定位</title>
        <style>
            * {
              padding:0;
              margin:0;
              font-size:14px;
            }
            .box{
              display: inline-block;
              width: 122px;
              height: 30px;
              line-height: 30px;
              background-color: #ccc;
            }
            .icon-arrow {
                display: inline-block;
                width: 20px;
                height: 1ex;
                background: url(img/arrow.png) no-repeat center;
            }
            .inlineStyle{
              white-space: nowrap;
              overflow: hidden;
            }
            .bgImg{
              background: url(http://hao.7654.com/tpl/img/2017-08-17/599541c4a5f4a.jpg);
              background-position: -10px -154px;
              width: 16px;
              height: 16px;
            }
            a{
              text-decoration: none;
            }
            .icon-fix{
              display: inline-block;
              position: relative;
              top: 8px;
              left: 0;
              _top: -8px;
              margin-right: 5px;
            }
            .hoveredImg{
              background: url(img/index_sprites0226.png) no-repeat;
              background-position: 0 -698px;
              width: 38px;
              height: 35px;
              _top: -3px;
              z-index: 4;
            }
            .clearfix {
                display: block;
                zoom: 1;
            }
            .tag{
              display: inline-block;
              position: absolute;
              z-index: 4;
              height: auto;
              width: auto;
            }
            
            .inline-right{
              display: inline-block;
              _left: -1px;
              width: 30px;
              font-size: 12px;
              line-height: 13px;
              padding-top: 2px;
              color: #f00;
              text-align: left;
              white-space: normal;
              margin: 0 5px;
              z-index: 4;
            }
            .clearfix:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <span class="box">
          <a href="http://mini.eastday.com" class="inlineStyle">
            <span class="bgImg icon-fix">&nbsp;</span>淘宝特卖
          </a>
          <a data-tjname="ec,,,taobaotm" class="tag hoveredImg clearfix " data-pos="8-1" target="_blank" href="http://add.bslzgs.com/index.php?id=220&amp;from=ZM3"><span class="inline-right">正品 2 折</span></a>
        </span>
    </body>
</html>